var vie_fwk_base = Backbone.View.extend({
    template: null,
    initialize: function(){
        this.observeModel();
        this.setTemplate();
    },
    observeModel: function(){
        if(typeof this.model != 'undefined' && this.model != null){
            this.model.bind('change', this.render, this);
            this.model.bind('destroy', this.destroy_view, this);
        }
    },
    setTemplate: function(templateName){
        if(typeof templateName != 'undefined' && templateName != null && templateName != ''){
            this.template = _.template(templateLoader.templates[templateName]);
            return true;
        }
        this.template = null;
        return false;
    },
    destroy_view: function() {
    
        //COMPLETELY UNBIND THE VIEW
        this.undelegateEvents();
    
        this.$el.removeData().unbind(); 
    
        //Remove view from DOM
        this.remove();  
        Backbone.View.prototype.remove.call(this);

    }
});

/**
 *page 
 */
var vie_fwk_base_page = vie_fwk_base.extend({
    tagName: 'div',
    attributes: {},
    pageHead: null,
    pageHeadModel: null,
    pageBody: null,
    options: null,
    initialize: function(options){
        this.initVars(options);
    },
    setPageHeadModel: function(){
        this.pageHeadModel = null;
        this.pageHeadModel = new mod_fwk_base_toolbar();
    },
    initVars: function(options){
        this.pageHeadModel = null;
        this.pageHead = null;
        this.pageBody = null;
        this.options = options;
        this.observeModel();
        this.setPageHeadModel();
    },
    render: function(){
        //sample
        // this.pageBody = new vie_notebooks_list({collection: __app.colls.note_books});
        // this.displayToMain();
        return this;
    },
    displayToMain: function(){
        $(this.el).html('');
        $(this.el).attr('id', $(this.options.container).attr('id') + '-body');
        $(this.el).append(this.pageBody.render().el);
        $(this.options.container).html(this.getPageHead());
        $(this.options.container).append($(this.el));
    },
    getContainerId: function(){
        return $(this.options.container).attr('id');
    },
    getPageHead: function(){
        this.pageHead = null;
        this.pageHead = new vie_fwk_base_toolbar({model: this.pageHeadModel});
        return this.pageHead.render().el;
    }
});
/**
 * list 
 */
var vie_fwk_base_list = vie_fwk_base.extend({
    tagName: 'ul',
    className: 'thumbnails',
    listItemViews: null,
    listItemView: null,
    initialize: function(){
        
    },
    renderList: function(){
        this.listItemViews = {};
        var models = typeof this.collection.models != 'undefined' && this.collection.models != null? this.collection.models: this.collection
        for(var i=0;i<this.collection.length;i++){
            var listItemModel = models[i];
            var listItemView = new this.listItemView({model: listItemModel});
            this.listItemViews[listItemModel.get('id')] = listItemView;
            $(this.el).append(listItemView.render().el);
        }
    },
    render: function(){
        $(this.el).html('');
        this.renderList();
        return this;    
    }
});

/**
 *toolbar 
 */
var vie_fwk_base_toolbar = vie_fwk_base.extend({
    tagName: 'div',
    attributes: {},
    template: null,
    initialize: function(){
        this.setTemplate('tpl-toolbar');
        this.observeModel();
    },
    render: function(){
        $(this.el).attr('id', this.model.get('toolbarid'));
        $(this.el).html(this.template(this.model.toJSON()));
        return this;
    }
});

